<%--@elvariable id="flats" type="java.util.LinkedList<com.flats.model.entity.Flat>"--%>
<%@include file="header.jsp" %>
<%@include file="search.jsp" %>
<link rel="stylesheet" href="<c:url value="/css/show-flats.css" />">
<div class="show-flats-container">
    <div class="result-amount">${fn:length(flats)} result found</div>
    <div class="row">
        <c:forEach var="flat" items="${flats}">

            <div class="col-sm-6">
                <div class="flat-block brdr bgc-fff pad-10 box-shad btm-mrg-20 property-listing" data-id="${flat.id}">
                    <div class="media">
                        <a class="pull-left" href="#" target="_parent">
                            <img alt="image" class="img-responsive"
                                 src="<%=request.getContextPath()%>/images/img-not-found.jpg"></a>
                            <%--src="<%=request.getContextPath()%>/images/flats_photo/foto11.jpg"></a>--%>

                        <div class="clearfix visible-sm"></div>

                        <div class="media-body fnt-smaller">
                            <a href="#" target="_parent"></a>

                            <h4 class="media-heading">
                                <a href="#" target="_parent">$${flat.price}
                                    <small class="pull-right">${flat.address.street} ${flat.address.build}</small>
                                </a></h4>


                            <ul class="list-inline mrg-0 btm-mrg-10 clr-535353">
                                <li>${flat.area} SqFt</li>

                                <li style="list-style: none">|</li>

                                <li>${flat.numberOfRooms} Rooms</li>

                                <li style="list-style: none">|</li>

                                <li>${flat.constructionYear} Year</li>
                            </ul>

                            <p class="hidden-xs">${fn:substring(flat.notes,0,190)}...</p>

                            <div class="rating pull-right">
                                <span class="rating-val">${flat.rating}</span><img class="img-star"
                                                                                   src="<%=request.getContextPath()%>/images/icon_rating.png">

                            </div>
                            <div class="clearfix"></div>
                            <span class="fnt-smaller fnt-lighter fnt-arial">${flat.address.country},${flat.address.city}</span>
                        </div>
                    </div>
                </div>
            </div>
        </c:forEach>
    </div>
</div>
<script>
    (function ($) {
        $(function () {
            $('.flat-block').on('click', function () {
                var selectedFlatId = $(this).data("id");
                console.log("selectedFlatId",selectedFlatId);
                window.location.href = "flat.detail?flatId="+selectedFlatId;
            });
        });
    })(jQuery);
</script>
